<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>collision detection</title>
    <style>
        p{
            position: absolute;
            color: aliceblue;
            top:10px; left: 220px;
        }
    
    </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="background:#000;">
       your browser not support canvas!!!
   </canvas>
   <p id="log">没撞上</p>
   <script src="../js/utils.js"></script>
   <script src="../js/ball.js"></script>
   <script>
       window.onload = function(){
           var canvas = document.getElementById('canvas'),
               context = canvas.getContext('2d'),
               log = document.getElementById('log'),
               mouse = utils.captureMouse(canvas),
               ballA = new Ball(50, "#ff0000"),
               ballB = new Ball(50, "#ffff00");
           
           ballA.x = canvas.width/2;
           ballA.y = canvas.height/2;
           
          
           
           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               ballB.x = mouse.x;
               ballB.y = mouse.y;
               
               if(utils.intersects(ballA.getBounds(), ballB.getBounds())){
                   log.innerHTML = "撞上了";
               }else{
                   log.innerHTML = "没撞上";
               }
               
               var boundsA = ballA.getBounds(),
                   boundsB = ballB.getBounds();
               context.strokeStyle = "white";
               context.strokeRect(boundsA.x, boundsA.y, boundsA.width, boundsA.height);
               context.strokeRect(boundsB.x, boundsB.y, boundsB.width, boundsB.height);
               
               ballA.draw(context);
               ballB.draw(context);
           }())
               
       }
    
   </script>
    
</body>
</html>